<template>
  <CommonPage
    :scroll-props="{ pullupEnabled: false, onPulldown, height: '100%' }"
    :navigate-props="{ borderBottom: false }"
    custom-class="knowledge-page"
  >
    <div class="knowledge-page__content">
      <div class="knowledge-page__nav">
        <div class="knowledge-page__nav-wrapped">
          <div
            v-for="item in categoryList"
            :key="item.id"
            :class="[item.id === active ? 'is-active' : '']"
            class="knowledge-page__nav_item"
            @tap="onSelect(item.id)"
          >
            <span
              v-if="item.hasSymptoms"
              class="knowledge-page__nav_item-dot"
            ></span>
            {{ item.name }}
            <div
              v-show="item.id === active"
              class="knowledge-page__nav_item-line"
            ></div>
          </div>
        </div>
      </div>
      <div class="knowledge-page__article">
        <mp-html :content="html" :copy-link="false" @linktap="onTap" />
      </div>
    </div>
  </CommonPage>
</template>

<script setup lang="ts">
import CommonPage from "@/components/common-page/index.vue";
import { computed, ref, watch } from "vue";
import { useTabBarSelected } from "@/hooks/useTabBarSelected";
import Taro, { useDidShow, useLoad } from "@tarojs/taro";
import { apiQueryArticalContentById, apiQueryCaterogy } from "@/apis/knowledge";
import { ResponseCodeEnum } from "@/constants/index";
import { ICaterogyItem } from "@/apis/types/knowledge";

defineOptions({
  name: "knowledge-page",
});

const { setSelectIndex } = useTabBarSelected();
const active = ref<number>(0);
const categoryList = ref<ICaterogyItem[]>([]);
const articalContent = ref<string>("");
// const detail = ref<IArticalDetailRes | null>(null);

const html = computed(() => {
  if (!articalContent.value) return;
  return `${articalContent.value
    .replace(/\<img/gi, '<img style="width: 100%;"')
    .replace(/pre/g, "p")
    .replace(/<a/g, '<a style="color: #60B89B"')}`;
  /**
     * .replace(
      /(<a\b[^>]*?)\s+href=(['"])(.*?)\2/gi,
      "$1 href=$2$3$2 data-href=$2$3$2"
    )
    */
});

useLoad(() => {
  queryCategoryServer();
});

useDidShow(() => {
  setSelectIndex(1);
});

const onPulldown = async (done) => {
  await queryCategoryServer();
  done();
};

const onSelect = (value: number) => {
  if (active.value !== value) {
    active.value = value;
  }
};

const queryCategoryServer = () => {
  apiQueryCaterogy().then((res: any) => {
    const { code, data } = res;
    if (code === ResponseCodeEnum.SUCCESS) {
      categoryList.value = data;
    }
  });
};

const onTap = (e) => {
  const { href } = e.detail;
  if (href) {
    Taro.navigateTo({
      url: `/packageA/pages/webview/index?url=${encodeURIComponent(href)}`,
    });
  }
};
const queryArticalContentByIdServer = (categoryId: number) => {
  apiQueryArticalContentById(categoryId).then((res: any) => {
    const { code, data } = res;
    if (code === ResponseCodeEnum.SUCCESS) {
      articalContent.value = data[0].rawHtml;
    }
  });
};

watch(
  () => categoryList.value,
  (val) => {
    if (val && val.length && !active.value) {
      active.value = val[0].id;
    }
  }
);

watch(
  () => active.value,
  (val) => {
    if (val) {
      queryArticalContentByIdServer(val);
    }
  }
);
</script>

<style lang="less">
.knowledge-page {
  // padding-top: 20px;
  &__content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  &__nav {
    // position: fixed;
    // top: 0;
    // left: 0;
    // right: 0;
    padding-bottom: 15px;
    z-index: 99999;
    box-shadow: 0 4px 4px 0 rgba(125, 125, 125, 0.1);
    overflow-x: scroll;
    // background: red;
    &::-webkit-scrollbar {
      display: none;
    }
    &-wrapped {
      display: flex;
      align-items: flex-end;
    }
    &_item {
      flex-shrink: 0;
      flex-grow: 0;
      position: relative;
      font-weight: 400;
      font-size: 28px;
      color: #8b8b8b;
      line-height: 40px;
      height: 50px;
      &:not(:last-child) {
        margin-right: 20px;
      }
      &.is-active {
        font-weight: 500;
        font-size: 32px;
        color: #000000;
        line-height: 44px;
      }
      &-dot {
        width: 10px;
        height: 10px;
        background: #ff5a5a;
        border-radius: 50%;
        position: absolute;
        right: -10px;
        top: 0;
      }
      &-line {
        position: absolute;
        transform: translate(-50%, 0);
        left: 50%;
        bottom: 0;
        width: 34px;
        height: 6px;
        background: #6acbb9;
        border-radius: 8px;
      }
    }
  }
  &__wrapped {
    position: relative;
    display: flex;
    gap: 30px;
    width: 100%;
  }
  &__article {
    font-weight: 400;
    font-size: 28px;
    color: #000000;
    line-height: 56px;
    word-break: break-all;

    flex: 1;
    width: 100%;
    height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
    &-text {
    }
  }
}
</style>
